<template>
  <el-form
    ref="formRef2"
    :model="formInline"
    :rules="rules"
    class="form-inline"
    label-width="auto"
    label-position="top"
    :disabled="isDisabled"
  >
    <el-form-item
      v-for="(item, index) in formList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
    >
      <!-- input -->
      <el-input
        v-if="item.type === 'input'"
        v-model="formInline[item.prop]"
        placeholder="请输入"
        :disabled="item.isDisabled"
        clearable
      />
      <!-- select -->
      <el-select
        v-if="item.type === 'select'"
        v-model="formInline[item.prop]"
        :filterable="item.isSearch"
        placeholder="请选择"
      >
        <el-option
          v-for="j in item.options"
          :key="j.value"
          :label="j.label"
          :value="j.value"
        />
      </el-select>

      <!-- textarea -->
      <el-input
        v-if="item.type === 'textarea'"
        v-model="formInline[item.prop]"
        placeholder="请输入"
        :rows="4"
        type="textarea"
        clearable
      />

      <!-- date -->
      <el-date-picker
        v-if="item.type === 'date'"
        v-model="formInline[item.prop]"
        type="daterange"
        range-separator="→"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
  import {
    ref,
    reactive,
    defineExpose,
    defineProps,
    onMounted,
    withDefaults,
    watch,
  } from 'vue'
  import { form2, form2Craft } from '../table/column'
  import { useAchievementAwardStore } from '@/store/modules/achievementAward'
  import { storeToRefs } from 'pinia'

  const props = withDefaults(
    defineProps<{
      isDisabled?: boolean
      isCraft?: string
      isUpdate?: boolean
    }>(),
    {
      isDisabled: false,
      isUpdate: false,
      isCraft: '研发类',
    }
  )

  const formList = ref()

  watch(
    () => props.isCraft,
    (val) => {
      val == '研发类'
        ? (formList.value = form2.value)
        : (formList.value = form2Craft.value)
    }
  )

  watch(
    () => props.isUpdate,
    (val) => {
      for (const key in allForm.value) {
        formInline.value[key] = allForm.value[key]
      }
    }
  )
  const formRef2 = ref()
  const formInline = ref({})
  const rules = reactive({})
  const store = useAchievementAwardStore()
  const { addForm } = store
  const { allForm } = storeToRefs(store)
  onMounted(() => {
    // if (props.isUpdate) {
    //   console.log('form1', allForm.value)
    //   for (let key in allForm.value) {
    //     formInline.value[key] = allForm.value[key]
    //   }
    // }
  })
  const submit = async () => {
    await formRef2.value.validate((valid) => {
      if (valid) {
        console.log('submit!')
        addForm(formInline.value)
      } else {
        console.log('error submit!!')
        return false
      }
    })
  }
  defineExpose({
    submit,
  })
</script>

<style scoped lang="scss">
  .form-inline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 16px;
    grid-column-gap: 20px;

    .el-input {
      // --el-input-width: 323px;
    }

    .el-select {
      // --el-select-width: 323px;
    }

    :deep(.el-form-item__label) {
      padding: 0 5px 0 0;
    }

    :deep(.el-form-item) {
      margin-right: 0px;
      margin-bottom: 0px;
    }
  }
</style>
